<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>非破坏性操作</title>
    <link rel="stylesheet" href="../../css/common.css">
    <script type="text/javascript" src="../../js/jquery.js"></script>
<!--    <script type="text/javascript" src="color_jquery.js"></script>-->
    <script>
        (function($){
            $.extend($.fn, {
                parent: function(){ // 扩展 jQuery 对象方法，获取所有匹配元素的父元素
                    var arr = [];
                    $.each(this, function(index, value){ // 遍历匹配的 DOM 元素
                        arr.push(value.parentNode); // 把匹配元素的父元素推入临时数组
                    });
                    arr = $.unique(arr);    // 在临时数组中过滤重复的元素
                    return this.pushStack(arr); // 返回新创建的 jQuery 对象，而不是修改后的当前 jQuery 对象
                }
            });
        })(jQuery); // 封装插件

        $(function(){
            var $p = $("p"); // 获取所有p元素，并存储到变量 $p 中
            $p.parent().css("border", "2px solid blue").end();  // 调用 parent() 方法获取 p 元素的父元素，并设置它们的边框样式
            $p.hide();   // 隐藏所有 p 元素，即当前 jQuery 对象
        })
    </script>
</head>
<body>
<div style="width: 400px; height: 200px;">大盒子
    <p>段落文本1</p>
    <div style="width: 200px; height: 100px;">小盒子
        <p>段落文本2</p>
    </div>
</div>
</body>
</html>
